<template>
    <div>
        <van-nav-bar title="本地装修公司" left-arrow @click-left="onClickLeft">
            <template #right>
                <van-image
                id="right-text"
                width="20"
                height="20"
                src="/img/ss_3.png"
                />
            </template>
         </van-nav-bar>
        <div id="condition">
            <span class="active">连锁品牌</span>
            <span>上榜商家</span>
             <span>10km内</span>
             <span>有评价商家</span>
             <span>北欧</span>
             <span>整屋定制</span>
        </div>
        <router-link to="/gongsiin">
        <div id="gongsi" v-for="item in 8" :key="item">
            <div>
                <van-image
                width="100"
                height="100"
                src="/company/shenghuojia.png"
                />
            </div>
            <div>
                <div>
                    <h4>生活家居郑州分公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<van-tag color="#656974">连锁</van-tag></h4>                   
                </div>
                <div id="pingfen">
                <van-rate v-model="pingfen" allow-half void-icon="star" readonly/>
                </div>
                <div id="info">
                    <div>8-80万一套</div>
                    <div>3.4km</div>
                </div>
            </div>
        </div>
        </router-link>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            pingfen:4.5,
            };
        },
        methods:{
            onClickLeft() {
            this.$router.back();
            },
        }
    }
</script>
<style lang="scss" scoped>
#condition{
    display: flex;
    white-space:nowrap;
    overflow:hidden;
    padding: 0 5px;
    span{
        font-size: 0.8em;
        border-radius: 5px;
        background: #efefef;
        margin: 5px;
        padding: 5px ;
        &.active{
            background: #b1aeda;
            color: rgb(35, 35, 207);
        }
    }
}
#gongsi{
    display: flex;
    padding: 10px;
    color: #000;
    h4{
        margin: 0 0 25px 5px;
    }
    #pingfen{
        display: flex;
    }
    #info{
    // width: 270px;
    display: flex;
    justify-content:space-between;
    margin-top: 10px;
    margin-left: 5px;
}
}
</style>